<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus';
import { onMounted, ref } from 'vue';
import { createNonEmptyRule, menuTypeSelect, ModalForm, statusSelect, MenuItem, request, treeUtils } from '../../../utils';

const props = defineProps<{
  row?: MenuItem
  isEdit?: boolean
}>()

const form = ref<MenuItem>({})
const formRef = ref<FormInstance>()
const menuTree = ref<MenuItem[]>([])
const rules: FormRules<MenuItem> = {
  menuName: createNonEmptyRule('菜单名称不能为空'),
  perm: createNonEmptyRule('权限字符不能为空')
}

onMounted(async () => {
  const { row, isEdit } = props
  const defaultForm: MenuItem = { status: true, cache: true, visible: true , menuType: 'dir'}
  if (row) {
    form.value = isEdit ? { ...row } : { parentId: row._id, ...defaultForm }
  } else {
    form.value = defaultForm
  }
  const { data }: { data: any[] } = await request('/menu/options')
  if (isEdit) {
    const index = data.findIndex(_ => _._id === row?._id)
    if (index > -1) {
      data.splice(index, 1)
    } else {
      const flatArr = treeUtils.flat({ data })
      for (const item of flatArr) {
        const childs: any[] | undefined = item.children
        if (childs) {
          const index = childs.findIndex(_ => _._id === row?._id)
          if (index > -1) {
            childs.splice(index, 1)
          }
        }
      }
    }
  }
  menuTree.value = data
})

defineExpose<ModalForm>({
  validate () {
    return formRef.value?.validate()
  },
  submit () {
    return request.post(`/menu/${props.isEdit ? 'update' : 'add'}`, form.value)
  }
})
</script>

<template>
  <ElForm class="com-sys-menu-edit" ref="formRef" label-width="6em" :model="form" :rules="rules">
    <ElFormItem label="上级菜单">
      <ElCascader
        :style="{ width: '100%' }"
        :options="menuTree"
        filterable
        clearable
        :props="{ value: '_id', label: 'menuName', checkStrictly: true, emitPath: false }"
        v-model="form.parentId" />
    </ElFormItem>
    <ElFormItem label="菜单类型">
      <ElRadioGroup :disabled="isEdit" v-model="form.menuType">
        <ElRadio v-for="_ in menuTypeSelect" :key="_.value" :value="_.value">
          {{ _.label }}
        </ElRadio>
      </ElRadioGroup>
    </ElFormItem>
    <ElFormItem label="菜单名称" prop="menuName">
      <ElInput v-model="form.menuName" />
    </ElFormItem>
    <template v-if="form.menuType !== 'action'">
      <ElFormItem label="菜单图标">
        <ElSelect v-model="form.icon"></ElSelect>
      </ElFormItem>
      <ElFormItem label="显示排序">
        <ElInputNumber controls-position="right" :min="1" :max="9999" v-model="form.sort" />
      </ElFormItem>
      <ElFormItem label="路由地址">
        <ElInput v-model="form.path" />
      </ElFormItem>
    </template>
    <ElFormItem v-if="form.menuType === 'menu'" label="组件路径">
      <ElInput v-model="form.component"/>
    </ElFormItem>
    <ElFormItem label="权限字符" prop="perm">
      <ElInput v-model="form.perm"/>
    </ElFormItem>
    <ElFormItem v-if="form.menuType !== 'action'" label="其它参数">
      <ElCheckbox v-model="form.visible">显示</ElCheckbox>
      <template v-if="form.menuType === 'menu'">
        <ElCheckbox v-model="form.cache">缓存</ElCheckbox>
        <ElCheckbox v-model="form.newWindow">新窗口打开</ElCheckbox>
      </template>
    </ElFormItem>
    <ElFormItem label="菜单状态">
      <ElRadioGroup v-model="form.status">
        <ElRadio v-for="_ in statusSelect" :key="_.value" :value="_.value">
          {{ _.label }}
        </ElRadio>
      </ElRadioGroup>
    </ElFormItem>
  </ElForm>
</template>
